<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全国疫情地图</title>

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/jquery.js"></script>

    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>
        <h1> 全国疫情地图 </h1>
        <div class="showTime"></div>
        <div class="index"><a href="#">首页</a></div>
        <script>
            //右上角不断更新的时间的定时函数
            var formaDate = function() {
                var d = new Date()
                var year = d.getFullYear(), //多变量赋值
                    month = d.getMonth() + 1, //month：从0开始
                    date = d.getDate(),
                    hour = d.getHours(),
                    minute = d.getMinutes(),
                    second = d.getSeconds();

                year = year < 10 ? '0' + year : year; //三元操作符
                month = month < 10 ? '0' + month : month;
                date = date < 10 ? '0' + date : date;
                hour = hour < 10 ? '0' + hour : hour;
                minute = minute < 10 ? '0' + minute : minute;
                second = second < 10 ? '0' + second : second;
                var a = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
                $('.showTime').html(a);
            }
            setInterval(formaDate, 1000) //设定定时器，循环运行;
        </script>
    </header>
    <section class="mainbox">
        <!-- 左 -->
        <div class="column">
            <div class="panel bl bar">
                <h2>各地累计确诊分布（七大地理分区）</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
            <div class="panel bl line">
                <h2>全国疫情趋势</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
        </div>
        <!-- 中 -->
        <div class="column">
            <!-- 上模块 -->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>累计确诊人数</li>
                        <li>累计治愈人数</li>
                    </ul>
                </div>
            </div>
            <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart" style=" height: 680px;" id="viewDiv"></div>
                <div class="panelFooter"></div>
            </div>
        </div>
        <!-- 右 -->
        <div class="column">
            <div class="panel bl bar1">
                <h2>全国省份疫情确诊情况排行</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
        </div>

    </section>

    <script src="js/flexible.js"></script>
    <!-- //各地区累积确诊（七大地理分区）（左上 -->
    <script src="js/index.js"></script>
    <!-- //全国疫情趋势（左下 -->
    <script src="js/data.js"></script>
    <!-- //全国各地域确诊人群分布地图（中） -->
    <script src="js/chinaBettwen.js"></script>
    <!-- //全国省份疫情确诊情况排行（右） -->
    <script src="js/yiqingLeft.js"></script>


    <script>
        //累计确诊人数21468
        let sum = 21468
            //累计治愈人数14088
        let cureSum = 14088
        $(".no-hd li:first").text(sum)
        $(".no-hd li:nth-child(2)").text(cureSum)
    </script>
</body>

</html>